<template>
  <div>
      <div class="search content-box">
          <h6 class="title-h6">下载器分析筛选条件</h6>
          <xzq-search ></xzq-search>  
      </div>
      <div  style="background:#fff;padding-top:20px; margin-top:10px;border:1px solid #ddd;border-radius: 5px;" ref="element">
        <div class="blok-header clearfix" >
            <el-button-group>
                <el-button ><router-link :to="{name: 'xzqindex'}">下载器和物料</router-link></el-button>
                <el-button ><router-link :to="{name: 'xzqdetail'}">下载器明细</router-link></el-button>
                <el-button type="success">成功单价</el-button>
            </el-button-group>
        </div>
        <el-row style="padding:10px 15px 15px;">
            <div style="margin-bottom:10px;text-align:right;"><el-button type="primary"  @click="handleDownload" :loading="downloadLoading">导出列表</el-button></div>
            <div>
                <el-table :data="tableData" style="width: 100%;text-align:center">
                    <el-table-column label="日期/站点" align="center" fixed width="100">
                      <el-table-column prop="time" label="日期" align="center" width="100">
                      </el-table-column>
                    </el-table-column>

                    <el-table-column v-for="(item, index) in sites" align="center" :key="index" :label="sites[index]"  >
                        <!-- <template slot-scope="scope"> -->
                            <el-table-column   label="单价" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row[item].unitprice">{{ scope.row[item].unitprice }}</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <el-table-column   label="成功量" align="center">
                            <template slot-scope="scope">
                                <span  v-if="scope.row[item].successcout && scope.row.hasOwnProperty(item)">{{ scope.row[item].successcout }}</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                        <el-table-column   label="日总收益" align="center">
                            <template slot-scope="scope">
                                <span  v-if="scope.row[item].earnings && scope.row.hasOwnProperty(item)">{{ scope.row[item].earnings }}</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>     
                        <!-- </template>
                        
                        <el-table-column   label="成功量" :prop="tableData.item.successcout"></el-table-column>
                        <el-table-column   label="" :prop="tableData.item.earnings"></el-table-column> -->
                    </el-table-column>    
                </el-table>
            </div>
        </el-row>
      </div >
  </div>
</template>

<script>
import XzqSearch from '@/components/XzqData/XzqSearch'
export default {
  data() {
      return {
         downloadLoading: false,
         tableData: [{
            time: '2018-03-15',
            '华军软件园': {
                unitprice: 0.1746,
                successcout: 10000,
                earnings: 22780.64
            },
            '太平洋下载(画中画)': {
                // unitprice: null,
                // successcout: null,
                // earnings: null
            }
         },{
             time: '2018-03-16',
            '华军软件园': {
                unitprice: 0.1746,
                successcout: 10000,
                earnings: 22780.64
            },
            '太平洋下载(画中画)': {
                unitprice: 0.8946,
              //  successcout: null,
                earnings: 22.64
            }
         }],
         sites:['华军软件园', '太平洋下载(画中画)', '太平洋游戏站', '下载之家','PC6诱导位']
      }
  },
  components: {
      XzqSearch
  },
  created() {
    this.formatTabel()
  },
  methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleDownload() { //导出excel
        this.downloadLoading = true;
        let _this = this;
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          let thead = _this.website.concat();
          thead.unshift('产品包');
          const tHeader = thead;
          const list = _this.tableData;
          const filterVal = thead;
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '下载器分析excel')
          this.downloadLoading = false
        })
    },
    // //格式化表格数据
    formatTabel() {
        let _this = this;
        this.sites.forEach(function(v, index) {

            _this.tableData.forEach(function(item, i) {
                if(! item.hasOwnProperty(v)) {
                    item[v] = {}
                }
                
            })
        })
    }

  }
}
</script>
<style>
.blok-header {
  margin-bottom:10px;
}
.blok-header li{
    float: left;
    }
.blok-header  a {
    color: #666;

}    
</style>
